<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
            * {
                  margin: 0;
                  padding: 0;
            }

            .img {}

            .img::after {
                  content: '';
                  background: url(http://www.handu.com/uploadfile/2021/0223/20210223063334539.jpg) no-repeat;
                  opacity: 0.7;
                  top: 0;
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  z-index: -1;
            }

            .container {

                  width: 234px;
                  height: 214px;
                  /* background-color: rgba(253, 253, 253, 0.7); */
                  margin: 100px auto;
            }

            .form-signin-heading {
                  color: rgb(117, 141, 165);
                  text-align: center;
            }

            .form-group {
                  margin-top: 20px;
            }

            .btn-primary {
                  margin-top: 30px;
            }

            #btn {
                  display: block;
                  width: 310px;
                  height: 30px;
                  background-color: rgb(150, 160, 252);
                  border-radius: 10px;
                  border: none;
                  margin: 30px auto;
                  color: rgb(248, 250, 252);
                  margin-bottom: 5px;
            }

            .form-horizontal a {
                  text-decoration: none;
                  font-size: 12px;
                  color: rgb(0, 0, 0);
                  opacity: 1;
                  position: absolute;
                  right: 0;
            }
      </style>
      <link rel="stylesheet" href="../../static/css/bootstrap.css">
</head>

<body>
      <div class="img">
            <div class="container">
                  <form action="javascript:void(0)" class="form-horizontal col-md-4 col-md-offset-4">
                        <h2 class="form-signin-heading">请登录</h2>

                        <div class="form-group">
                              <label for="username" class="control-label">用户名</label>
                              <input type="text" class="form-control" id="username" autocomplete="off" value="wuyanzu3">
                        </div>

                        <div class="form-group">
                              <label for="password" class="contral-label">密码</label>
                              <input type="text" class="form-control" id="password" autocomplete="off" value="123456">
                        </div>

                        <button id="btn" class="btn btn-primary btn-sm ">登录</button>
                        <a href="./register.html">新用户注册</a>
                  </form>
            </div>
      </div>


      <script src="../../static/libs/jQuery.js"></script>
      <script src="../../static/libs/cookie.js"></script>
      <script>
            var btn = document.getElementById("btn");
            var username = document.getElementById("username");
            var password = document.getElementById("password");

            btn.onclick = function () {
                  let options = {
                        url: "http://127.0.0.1:8888/users/login",
                        data: {
                              username: username.value,
                              password: password.value
                        },
                        type: "POST",
                        dataType: "json"
                  }
                  $.ajax(options)
                        .done(function (data) {
                              console.log(data)
                              switch (data.code) {
                                    case 1:
                                          setTimeout(function () {
                                                location.href = "./index.html"
                                          }, 2000)
                                          setCookie('userid',data.user.id)
                                          setCookie("token",data.token,{expires:1})
                                    
                                    case 0:
                                          alert(data.message)

                              }
                        })
            }


      </script>

</body>

</html>